<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { useLocationBreed } from '@/simba/hooks/locationBreed'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	const { listLocBreedType, onNavLocBreedEditHandler,getLocationBreedList } = useLocationBreed()
	
	import type { ILocationBreedList } from '@/simba/types/plant.d';
	const listLocBreedsAll = ref<ILocationBreedList>()
	const listLocBreeds = ref<ILocationBreedList>()
	import sheep from '@/sheep';
	const user = computed(() => sheep.$store('user').userInfo);
	
	onShow( async ()=>{
		listLocBreedsAll.value = await getLocationBreedList(user.value.id)
		getLocBreeds()
	})
	
	const choosedLocBreed = ref(0)
	function getLocBreeds(){
		listLocBreeds.value = listLocBreedsAll.value.filter(item => {
			return item.type === listLocBreedType[choosedLocBreed.value].name
		})
	}
	function onLocBreedChooseChange(locBreedIndex: number) {
		choosedLocBreed.value = locBreedIndex
		//获取用户的位置/品种列表
		getLocBreeds()
	}
	// const { locationTabs, locationTabRef, onGetLocationDataHandler, onAddLocationHandler } = useLocationTabs()
</script>

<template>
<!-- 	<s-layout
	  title="位置&品种"
	  navbar="custom"
	  tabbar="/pages/index/plant"
	  :showTabbar="false"
	> -->
	
		<view class="content-sub">
			<up-subsection style="width: 100%;" :list="listLocBreedType" :current="0" mode="subsection" @change="onLocBreedChooseChange"></up-subsection>
		</view>
		<view style="margin-top: 30rpx;">
			<siLocationBreedList :list="listLocBreeds">
				<template #ItemOp="{obj}">
					<view class="solt-op">
						<view class="bu-edit" @tap="onNavLocBreedEditHandler(choosedLocBreed, obj.id)">
							<up-icon name="edit-pen"></up-icon>
						</view>
					</view>
				</template>
			</siLocationBreedList>
		</view>
		<view class="">
			<up-button type="primary" text="新增" @tap="onNavLocBreedEditHandler(choosedLocBreed)"></up-button>
		</view>
	<!-- </s-layout> -->
</template>

<style lang="scss">
	.bu-edit{
		width: 48rpx; 
		height: 48rpx; 
		border-radius: 14rpx;
		border: 1rpx #f0f0f0 solid; 
		background-color: #f0f0f0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>
